<template>
  <div class="app-container">
    <div class="shop-container">
      <h3>商品信息</h3>
      <nav v-loading="detailLoading">
        <li
          v-for="(detail,index) in shoplist"
          :key="index"
        >
          <span v-if="detail.productionState == 6 ? true : false" class="timecolor">此蛋糕无货，请联系用户更换蛋糕</span>
          <span v-if="detail.refundNotReturn === '退款不退货' ? true : false" class="timecolor">退款不退货</span>
          <span v-if="ruleForm.refundMark === '平台退款中' ? true : false" class="timecolor">平台退款中</span>
          <p style="display: flex;justify-content: space-between">
            <span><strong class="title-noEdit">蛋糕：</strong>{{ detail.goodsName }}</span>
          </p>
          <p><span><strong class="title-noEdit">规格：</strong>
              <span>{{ detail.goodsSpecs }}</span>
            </span>
          </p>
          <p><span><strong class="title-noEdit">Sku码：</strong>
              <span>{{ detail.skuCode }}</span>
            </span>
          </p>
          <p>
            <span><strong class="title-noEdit">价格：</strong>{{ (detail.totalPrice/100).toFixed(2) }}元</span>
            <!-- <span>数量：{{ detail.num }}</span> -->
          </p>
          <p>
            <span><strong class="title-noEdit">数量：</strong>{{detail.num}}</span>
          </p>
          <p><span><strong class="title-noEdit">状态：</strong>{{detail.productionStateName}}</span></p>
          <p>
            <span>
              <strong class="title-noEdit">商品类别：</strong>
              <strong>
                {{detail.goodsTypeName}}
              </strong>
            </span>
          </p>
          <p>
            <span><strong class="title-noEdit">祝福语：</strong>
              {{ detail.blessings }}
            </span>
          </p>
        </li>
      </nav>
    </div>
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <div class="payment-container">
        <h3>支付</h3>
        <el-form-item label="在线支付" class="viewTitleOrder">
          <span class="viewOrder">{{ ruleForm.sumPrice }}元</span>
        </el-form-item>
      </div>
      <div class="channel-container">
        <h3>渠道</h3>
        <el-form-item label="渠道类别" class="viewTitleOrder">
          <span class="viewOrder">{{ ruleForm.channelTypeName }}</span>
        </el-form-item>
        <el-form-item label="渠道" class="viewTitleOrder">
          <span class="viewOrder">{{ ruleForm.channelName }}</span>
        </el-form-item>
      </div>
      <div class="detail-container">
        <h3>订单信息</h3>
        <el-form-item label="后台单号" class="viewTitleOrder">
          <el-col class="viewOrder">{{ruleForm.xmbzNo}}</el-col>
        </el-form-item>
        <el-form-item label="平台单号" class="viewTitleOrder">
          <el-col class="viewOrder">{{ruleForm.platformOrderId}}</el-col>
          <!-- <el-input v-model="ruleForm.platformOrderId" clearable size="medium"></el-input> -->
        </el-form-item>
        <el-form-item label="收货人" class="viewTitleOrder">
          <el-col class="viewOrder">{{ruleForm.receiverName}}</el-col>
        </el-form-item>
        <el-form-item label="电话" class="viewTitleOrder">
          <el-col class="viewOrder">{{ruleForm.receiverPhone}}</el-col>
        </el-form-item>
        <el-form-item label="客户备注" class="viewTitleOrder">
          <el-col class="viewOrder">{{ruleForm.customerNotes}}</el-col>
        </el-form-item>
        <el-form-item label="生产备注" class="viewTitleOrder">
          <el-col class="viewOrder">{{ruleForm.productionNotes}}</el-col>
        </el-form-item>
        <el-form-item label="配送备注" class="viewTitleOrder">
          <el-col class="viewOrder">{{ruleForm.deliveryNotes}}</el-col>
        </el-form-item>
        <el-form-item label="客服备注" class="viewTitleOrder">
          <el-col class="viewOrder">{{ruleForm.customerServiceNotes}}</el-col>
        </el-form-item>
        <el-form-item label="门店信息" class="viewTitleOrder">
          <span class="viewOrder">
            {{ ruleForm.storeInfo }}
          </span>
        </el-form-item>
        <el-form-item v-if="ruleForm.groupBuyQRCode ? true : false" label="团购二维码" class="viewTitleOrder">
          <!-- <img :src="ruleForm.groupBuyQRCode" alt="" @click="imgclick"> -->
          <img :src="ruleForm.groupBuyQRCode" alt="" style="width: 450px;height: 450px">
          <!-- <span>
            {{ ruleForm.groupBuyQRCode }}
          </span> -->
        </el-form-item>
      </div>
      <div class="address-container">
        <h3>配送地址和时间</h3>
        <el-form-item label="配送时间" class="viewTitleOrder">
          <!-- <el-col class="viewOrder">客户备注时间：{{ this.PendingStartTime }}~{{ this.PendingEndTime }}</el-col> -->
          <el-col class="viewOrder">{{ deliveryTimeNotes }}</el-col>
          <el-col class="viewOrder">{{ ruleForm.StartTime }}~{{ ruleForm.EndTime }}</el-col>
        </el-form-item>
        <el-form-item label="仓库" class="house-style viewTitleOrder">
          <el-col class="viewOrder">{{ ruleForm.deptName }} &nbsp;&nbsp; {{ ruleForm.mainWarehouse }} &nbsp;&nbsp; {{ ruleForm.branchWarehouse }}</el-col>
        </el-form-item>
        <el-form-item label="地址" class="getAddress deletePadding viewTitleOrder">
          <el-col class="viewOrder">{{ ruleForm.receiverAddress }}</el-col>
        </el-form-item>
        <div>
          <DetailMap id="amapDemoCopy" v-bind:mapCenter="mapCenter" v-bind:markers="markers"></DetailMap>
        </div>
      </div>
    </el-form>
    <!-- 图片弹框 -->
    <el-dialog
      title
      :visible.sync="imgFlag"
      center
      :append-to-body="true"
      :lock-scroll="false"
      width="50%"
      z-index="2007"
    >
      <div style="width: 100%;">
        <el-scrollbar class="page-component__scroll">
          <el-col>
            <img :src="ruleForm.groupBuyQRCode" alt="">
          </el-col>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=57358ac872e8f834962f8aa7072c7bfe&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=57358ac872e8f834962f8aa7072c7bfe&plugin=AMap.Autocomplete"></script>
<script src="http://webapi.amap.com/maps?v=1.4.0&key=57358ac872e8f834962f8aa7072c7bfe&plugin=AMap.Geocoder"></script>

<script>
import {
  orderList, // 查询
  detailList,// 订单详情
} from '@/api/pending';
import {
  citySelect,// 城市
  shopList, // 蛋糕商品列表
} from '@/api/createOrder';
import { getWarehouseList } from "@/api/warehouse";
import { getUrlKey } from '@/util/getUrlKey.js';
import deliveryTime from '@/components/foundorder/deliverytime';
import DetailMap from '@/components/order-detail/map';
export default {
  components: {
    DetailMap,
    deliveryTime,
  },
  data() {
    return {
      // xmbzNo:'',
      querydetail: {
        orderId: ''
      },
      shoplist: '',
      deptId: getUrlKey('cityId') !== 1 ? getUrlKey('cityId') : '',
      deptIdFlag: false,
      deptName: getUrlKey('deptName') !== '全国' ? getUrlKey('deptName') : '',
      // orderlist: '',
      cityselect: "", // 城市获取列表
      getWarehousesByDeptIds: { // 查询所有仓库信息，划区域
        cityId: '',
        deptId: '',
        name: ''
      },
      formInline: {
        deptId: getUrlKey('cityId'),// 城市id
        // xmbzNo: '',// 后台单号
        id: '',
        StartTime: '',
        EndTime: '',
        channelType: '',
        orderTimeSort: 0, // 下单时间排序
        deliveryTimeSort: 0, // 配送时间排序
        page: 1,
        limit: 10,
        size: 10,
        orderDetailRequests: []
      },
      PendingStartTime: '',
      PendingEndTime: '',
      ruleForm: {
        totalPrice: '',
        channel: '',
        receiverDetailAddress: '',
        channelType: '',
        // wareHouse: '', // 用来获取分仓的参数
        branchWarehouse: '', // 分仓
        orderDetailRequests: []
      },
      getAreaScope: '',
      mapCenter: [121.59996, 31.197646],
      markers: [
        [121.59996, 31.197646],
        [121.40018, 31.197622],
        [121.69991, 31.207649]
      ],
      markersCopy: [], // 全国 未分配城市订单
      detailLoading: true,
      deliveryTimeNotes: '',
      imgFlag: false,
    }
  },
  created() {
    var map = new AMap.Map("amapDemoCopy", {
      center: [116.400274, 39.905812],
      zoom: 14
    });
    this.getList()
  },
  mounted() {
    this.cityId = JSON.parse(window.localStorage.getItem("saber-areaId")).content
  },
  methods: {
    getList() {
      let _this = this;
      this.detailLoading = true;
      this.querydetail.orderId = getUrlKey('id');
      this.formInline.id = getUrlKey('id');
      let goodsTypeNameKind = [];
      detailList(this.querydetail).then(res => {
        this.shoplist = res.data.data
        setTimeout(() => {
          this.detailLoading = false;
        }, 0.5 * 1000);
      })
      orderList(this.formInline).then(res => {
        // this.getOrderChannelTypeList();
        // 渠道类别列表
        res.data.data.rows[0].sumPrice = (res.data.data.rows[0].totalPrice/100).toFixed(2);
        let result = res.data.data.rows[0];
        this.ruleForm = res.data.data.rows[0];
        this.deptId = res.data.data.rows[0].deptId;
        this.deliveryStart = res.data.data.rows[0].deliveryStartTime.slice(5,16);
        this.PendingEndTime = res.data.data.rows[0].deliveryEndTime.slice(11,16);
        this.PendingStartTime = res.data.data.rows[0].deliveryStartTime.slice(5,16);
        this.ruleForm.StartTime = this.ruleForm.deliveryStartTime.slice(5,16);
        this.ruleForm.EndTime = this.ruleForm.deliveryEndTime.slice(11,16);
        // this.ruleForm.productionNotes = unescape(res.data.data.rows[0].productionNotes); // 生产备注
        // this.ruleForm.deliveryNotes = unescape(res.data.data.rows[0].deliveryNotes); // 配送备注
        // this.ruleForm.customerServiceNotes = unescape(res.data.data.rows[0].customerServiceNotes); // 客服备注
        // this.ruleForm.customerNotes = unescape(res.data.data.rows[0].customerNotes); // 客户备注
        // this.ruleForm.storeInfo = unescape(res.data.data.rows[0].storeInfo); // 门店信息
        // // 未确认订单若有时间，则加在配送备注中
        if(this.ruleForm.status == 1 && res.data.data.rows[0].deliveryStartTime.slice(5,16) !== '') {
          this.deliveryTimeNotes = result.deliveryNotes.substring(0,result.deliveryNotes.lastIndexOf("##"));
          this.deliveryMarksStart = this.deliveryTimeNotes.slice(5,16);
          this.deliveryMarksEnd = this.deliveryTimeNotes.slice(21,27);
          this.deliveryTimeEndNotes = this.ruleForm.deliveryNotes.substring(this.ruleForm.deliveryNotes.lastIndexOf("##"));
          this.deliveryTimeNotes = `客户原备注时间：${ this.deliveryMarksStart }~${ this.deliveryMarksEnd }`
          this.ruleForm.deliveryNotes =  this.deliveryTimeNotes + this.deliveryTimeEndNotes;
        } else if(this.ruleForm.status !== 1 && res.data.data.rows[0].deliveryStartTime.slice(5,16) !== '') {
          this.deliveryTimeNotes = result.deliveryNotes.substring(0,result.deliveryNotes.lastIndexOf("##"));
          this.deliveryTimeEndNotes = result.deliveryNotes.substring(result.deliveryNotes.lastIndexOf("##"));
          // console.log('this.deliveryTimeNotes',this.deliveryTimeNotes,'result.deliveryNotes',result.deliveryNotes)
          this.ruleForm.deliveryNotes = this.deliveryTimeNotes + this.deliveryTimeEndNotes;
        }
        // 未点击城市时划区域
        if(this.ruleForm.deptId == 1) {
          this.getNationwide()
        } else {
          this.getArea(this.ruleForm.deptId)
        }
      })
    },
    // 未分配城市订单（即全国订单）的标记
    getNationwide() {
      this.markersCopy = []
      var map = new AMap.Map('amapDemoCopy')
      this.markersCopy[0] = [this.ruleForm.longitude, this.ruleForm.latitude,this.ruleForm.receiverAddress]
      this.markersCopy.forEach((item,index) => {
        var marker = new AMap.Marker({
          position: new AMap.LngLat(item[0], item[1]),
          icon:new AMap.Icon({
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
            size: new AMap.Size(28, 36),  //图标所处区域大小
            imageSize: new AMap.Size(28, 36) //图标大小
          }),
          offset: new AMap.Pixel(-13, -30),
          zoom: 10
        })
        // console.log(item)
        marker.setLabel({
          offset: new AMap.Pixel(10, 10), //设置文本标注偏移量
          content: `<div class='info'>${item[2]}</div>`, //设置文本标注内容
          direction: 'top' //设置文本标注方位
        });
        map.add([ marker ])
      })
      // map.add([marker, polygon])
      // this.getAreaScopeMethod(this.getAreaScopeArray,marker)
      map.setZoomAndCenter(13, [this.ruleForm.longitude, this.ruleForm.latitude])
    },
    // 未点击城市时划区域
    getArea(deptId) {
      // console.log('this.ruleForm.deptId',deptId)
      this.getWarehousesByDeptIds.cityId = deptId;
      getWarehouseList(this.getWarehousesByDeptIds).then(res => {
        // console.log('划区域',res.data.data)
        this.getAreaScope = res.data.data;
        var isPointInRingList = [];
        var overlayGroupsArray = [];
        var marker = [];
        this.markers = [];
        // this.markers = ''
        let result = res.data.data;
        result.forEach((item,resultindex) => {
          // marker.push(item.longitude,item.latitude)
          // console.log(item.name)
          marker.push([item.longitude,item.latitude,`${item.name}`])
        // console.log(res[index].geoJson.geometry.coordinates,'res[index].geoJson.geometry.coordinates[0]')
          if(result[resultindex].geoJson.geometry !== '') {
            overlayGroupsArray.push(result[resultindex].geoJson.geometry.coordinates[0])
            result[resultindex].geoJson.geometry.coordinates[0].forEach((item) => {
              // console.log('item',item)
              isPointInRingList.push(item)
            })
          }
        })
        this.markers = marker;
        let lastmaker = [this.ruleForm.longitude, this.ruleForm.latitude,this.ruleForm.receiverAddress]
        this.markers[this.getAreaScope.length] = lastmaker
        // console.log('isPointInRingList','this.markers',this.markers)
        this.getAreaScopeArray = isPointInRingList;
        this.overlayGroups = overlayGroupsArray;
        this.getAreaScopeMethod(this.overlayGroups)
      })
    },
    // 划区域模块
    getAreaScopeMethod(subCoordinate){
      // if(this.markersCopy.length > 0){
      //   this.markers.push(this.markersCopy[0])
      //   this.Unallocated(subCoordinate)
      // } else {
        this.Unallocated(subCoordinate)
      // }
    },
    // 是否为未分配的订单
    Unallocated(subCoordinate) {
      var map = new AMap.Map("amapDemoCopy", {
        center: [116.400274, 39.905812],
        zoom: 14
      });
      var path = subCoordinate
      var polygon = new AMap.Polygon({
        path: path,
        strokeColor: "#000",
        strokeWeight: 3,
        strokeOpacity: 1,
        fillOpacity: 0.4,
        fillColor: '#fff',
        zIndex: 50,
      })
      // console.log('this.markers',this.markers)
      this.markers.forEach((item,index) => {
        // console.log(item[0],item[1])
        var marker = new AMap.Marker({
          position: new AMap.LngLat(item[0], item[1]),
          // size: new AMap.Size(15, 20),
          icon: new AMap.Icon({
            image: `${index == (this.markers.length - 1)? '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png': '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'}`,
            size: new AMap.Size(28, 36),  //图标所处区域大小
            imageSize: new AMap.Size(28, 36) //图标大小
          }),
          // icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
        })
        // console.log(item)
        marker.setLabel({
          offset: new AMap.Pixel(10, 10),  //设置文本标注偏移量
          content: `<div class='info'>${item[2]}</div>`, //设置文本标注内容
          direction: 'top' //设置文本标注方位
        });
        // map.add(marker)
        map.add([marker,polygon])
      })
      // 缩放地图到合适的视野级别
      map.setZoomAndCenter(13, [this.markers[this.markers.length - 1][0],this.markers[this.markers.length - 1][1]]);
      // map.setFitView([ polygon ])
    },
    imgclick() {
      this.imgFlag = true;
    },
  }
}
</script>

<style lang="scss">
  .red {
    color: #ff0000;
  }
.app-container {

  .shop-container {
    margin-left: 50px;
    h3 {
      border-bottom: 2px solid #efefef;
      padding-bottom: 10px;
    }
    .timecolor {
      width: 100%;
      line-height: 2;
      display: inline-block;
      font-size: 17px;
      font-weight: 600;
      color: red;
      text-align: right;
    }
    nav {
      padding-left: 25px;
      min-height: 200px;
      li {
        margin: 0 auto;
        width: 70%;
        padding: 10px 25px;
        list-style: none;
        background: #efefef;
        margin-bottom: 10px;
        p {
          span {
            .title-noEdit {
              display: inline-block;
              width: 80px;
              margin-right: 5px;
              text-align: right;
            }
          }
        }
      }
    }
    .EditCake {
      width: 70%;
      margin: 20px auto;
      span {
        .orderprice {
          color: red;
        }
      }
    }
  }
  .el-form {
    .payment-container {
      margin-left: 50px;
      h3 {
        border-bottom: 2px solid #efefef;
        padding-bottom: 10px;
      }
      .el-form-item {
        width: 75%;
        margin: 20px auto;
        .el-input {
          width: 50%;
        }
      }
    }
    .channel-container {
      margin-left: 50px;
      h3 {
        border-bottom: 2px solid #efefef;
        padding-bottom: 10px;
      }
      .el-form-item {
        width: 75%;
        margin: 20px auto;
        .el-select {
          width: 50%;
        }
      }
    }
    .detail-container {
      margin-left: 50px;
      h3 {
        border-bottom: 2px solid #efefef;
        padding-bottom: 10px;
      }
      .el-form-item {
        width: 75%;
        margin: 20px auto;
        .el-input {
          width: 50%;
        }
        .el-select {
          width: 50%;
        }
        img {
          width: 150px;
          height: 150px;
        }
      }
    }
    .address-container {
      margin-left: 50px;
      h3 {
        border-bottom: 2px solid #efefef;
        padding-bottom: 10px;
      }
      .el-form-item {
        width: 75%;
        margin: 20px auto;
      }
      div {
        // width: 100%;
        margin: 0 auto;
        // .getAddress {
        // }
        .adressDetailDivCopy {
          line-height: 20px;
          width: 73%;
          background: #fff;
          position: absolute;
          // top: 38px;
          left: 0px;
          z-index: 99;
          .adressDetail {
            border: 1px solid #efefef;
            padding-left: 0px;
            margin-top: 0;
            li {
              border-bottom: 1px solid #DCDFE6;
              p{
                margin: 0;
                padding: 0 10px;
                list-style: none;
                width: 100%;
                text-align: left;
                line-height: 1.6;
              }
              p:first-child {
                font-size: 17px;
              }
              p:last-child {
                color: #999;
              }
            }
            .addressActive {
              // background-color: #000;
              background: #F5F7FA;
            }
          }
        }
        #amapDemoCopy {
          width: 90%;
          margin-left: 2%;
          margin-bottom: 140px;
          height: 800px;
        }
      }
      .submit-order {
        position: fixed;
        bottom: 0;
        width: 81%;
        left: 11%;
        padding-top: 20px;
        padding-bottom: 50px;
        padding-left: 7%;
        display: flex;
        justify-content: flex-end;
        box-shadow: 0 -2px 3px -1px #efefef;
        background: #fff;
        opacity: .9;
      }
    }
  }
}
.el-dialog {
  div {
    .el-scrollbar {
      .el-col {
        .el-col {
          div {
            .el-form {
              .el-form-item {
                .formType {
                  display: flex;
                  height: 60px;
                }
                .avatar-uploader {
                  .el-upload:hover {
                    border-color: #409eff;
                    .avatar {
                      width: 148px;
                      height: 148px;
                      display: block;
                    }
                  }
                }
                .el-upload--picture-card {
                  img {
                    width: 148px;
                    height: 148px;
                    line-height: 146px;
                  }
                }
                .avatar-uploader-icon {
                  font-size: 28px;
                  color: #8c939d;
                  width: 148px;
                  height: 148px;
                  line-height: 148px;
                  text-align: center;
                }
              }
            }
          }
        }
      }
    }
  }
  .el-tabs {
    .el-tab-pane {
      .el-col {
        .order-message {
          margin-top: 2%;
          // border-bottom: 0.1rem solid #dfe4ed;
          padding-bottom: 2%;
          margin-bottom: 5px;
        }
        .el-scrollbar {
          .order-list {
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            font-family: Helvetica Neue, Arial, PingFang SC, microsoft yahei, STXihei;
            color: #3f4156;
            box-sizing: inherit;
            margin-top: 10px;
            margin: 0.5rem;
            box-shadow: rgb(223, 228, 237) 2px 2px 10px;
            .order-list-item {
              font-size: 14px;
              font-weight: 400;
              line-height: 1.5;
              font-family: Helvetica Neue, Arial, PingFang SC, microsoft yahei, STXihei;
              color: #3f4156;
              box-sizing: inherit;
              margin-bottom: 20px;
              border-bottom: 1px solid #fff;
              background: #fff;
              .order-header-area {
                padding: 10px 20px;
                .order-header {
                  position: relative;
                  height: 50px;
                  overflow: hidden;
                  .order-num {
                    display: inline-block;
                    position: relative;
                    height: 33px;
                    background: #585a6e;
                    color: #fff;
                    padding: 0 10px;
                    text-align: center;
                    span {
                      position: relative;
                      z-index: 9;
                      font-size: 16px;
                      line-height: 2;
                    }
                    // margin-top: 10px;
                  }
                }
              }
            }
          }
          div {
            table {
              border-collapse: collapse;
              text-align: center;
              tr {
                border: 1px solid rgb(223, 228, 237);
                td {
                  border: 1px solid rgb(223, 228, 237);
                  padding: 0.5rem 0.5rem;
                  height: 2.6rem;
                  line-height: 1rem;
                }
              }
            }
          }
        }
      }
    }
  }
  .selectTimesubmit {
    display: flex;
    justify-content: center;
    margin-top: -30px;
    margin-left: 50px;
  }
}
// 下拉框显示最后一行
.el-select-dropdown {
  .el-scrollbar {
    .el-select-dropdown__wrap.el-scrollbar__wrap {
      .el-scrollbar__view {
        margin-bottom: 15px;
      }
    }
  }
}
.deletePadding {
  .el-form-item__content {
    .el-textarea {
      // 去掉输入框textarea的斜杠
      textarea {
        resize: none;
        padding-right: 43px;
      }
    }
  }
}
.el-form-item__content {
  .el-textarea {
    .el-input__count {
      line-height: 10px;
    }
    // 去掉输入框textarea的斜杠
    textarea {
      resize: none;
    }
  }
  .el-input {
    .el-input__suffix {
      .el-input__suffix-inner {
        .el-input__count {
          .el-input__count-inner {
            line-height: 0px;
          }
        }
      }
    }
  }
}
.viewOrder {
  padding-left: 20px;
}
.viewTitleOrder {
  padding-left: 200px;
}
</style>
